<template>
	<view class="wrap">
		
		<view class="topSafe" :style="'height:'+topSafe+'px'"></view>
		<view class="title-w-box" :style="{paddingTop: topSafe + 'px', opacity: opacity}">
		</view>
		<view id="past0" class="title-box" :style="{paddingTop: topSafe + 'px'}">
			<view class="main">推荐好友</view>
		</view>
		
		<view class="top">
			<!-- <image class="top-img" src="./imgs/share-top-bg.png"></image> -->
			<view class="share-btn" @click="clickShare"></view>
			<!-- <view class="tip-content">每邀1位新客下单 达标预赚200元</view> -->
			<!-- <view class="invite-count">
				<view class="count">再邀请8人，立得</view>
				<view class="money">28<text class="unit">元</text></view>
			</view> -->
		</view>
		<view class="invitation-progress">
			<view class="list-top-img">
				<image src="http://qnimg.yunkede.com/83687c95540e20230fee35b33e906c2.png"></image>
				<view class="title">邀请进度</view>
			</view>
			<view class="content pad-top40">
				<view class="item">
					<view class="title">已获取优惠劵数量</view>
					<view class="desc">{{ couponCount }}</view>
				</view>
				<view class="item">
					<view class="title">已邀请好友 (人)</view>
					<view class="desc">{{ inviteCount }}</view>
				</view>
			</view>
		</view>

		<view class="invite-list">
			<view class="list-top-img">
				<image src="http://qnimg.yunkede.com/83687c95540e20230fee35b33e906c2.png"></image>
				<view class="title">邀请记录</view>
			</view>
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="left">
					<view class="avatar">
						<image :src="item.toUserInfo.avatar" ></image>
					</view>
					<view class="user-info">
						<view class="name">{{ item.toUserInfo.nickname }}</view>
						<view class="date">{{ item.add_time }}</view>
					</view>
				</view>

				<view class="right">
					<view class="money">{{ item.is_get ? '已获取优惠卷': '未下单' }}</view>
				</view>
			</view>
			<u-empty
			    mode="list"
				v-if="!list.length"
				text="暂无邀请记录..."
				textSize="28"
			>
			</u-empty>
		</view>

		<u-popup :show="shareShow" round="20" closeable @close="shareShow = false">
			<view class="share-box">
				<view class="fixed-share-box">
					<!-- <view class="qrcode-box"> -->
						<image :src="shareQrUrl" ></image>
					<!-- </view> -->
				</view>
				<view class="download-box">
					<view class="download-tit">
						分享至
					</view>
					<view class="download-btn" @click="downLoadBase64Fun">
						<view class="imgBox">
							<image src="@/static/images/download-icon.png"></image>
						</view>
						<view class="download-txt">
							保存至相册
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		shareQrcode,
		inviteList
	} from "@/api/share.js"
	export default {
		data() {
			return {
				opacity: 0,
				topSafe: 0,
				shareShow: false,
				shareQrUrl: "",
				couponCount: 0, // 优惠卷数量
				inviteCount: 0, // 邀请人数
				list: [], // 邀请列表
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (e) => {
					this.topSafe = e.statusBarHeight //状态栏高度
				}
			})
			this.getInviteList();
		},
		methods: {
			
			
			// async posterCanvas(qrcode) {
			// 	const that = this
			// 	that.$set(that, 'canvasStatus', true);
			// 	const ctx = uni.createCanvasContext('myCanvas');
			// 	ctx.clearRect(0, 0, 0, 0)
			// 	ctx.fillStyle = '#fff';
			// 	ctx.fillRect(0, 0, 654, 912);
			// 	// uni.getImageInfo({
			// 	// 	src: that.posterbackgd,
			// 	// 	success: function (res) {
			// 		  // const WIDTH = res.width
			// 		  // const HEIGHT = res.height
			// 		  ctx.drawImage(that.posterbackgd, 0, 0, 654, 912)
			// 		  ctx.drawImage(qrcode, 223, 534, 208, 208);
			// 		  ctx.draw(true, function() {
			// 			  uni.canvasToTempFilePath({
			// 			  	canvasId: 'myCanvas',
			// 			  	fileType: 'png',
			// 			  	success: function(res) {
			// 					uni.hideLoading();
			// 					that.$set(that, 'posterImage', res.tempFilePath);
			// 					that.$set(that, 'posterImageStatus', true);
			// 					that.$set(that, 'canvasStatus', false);
			// 					that.shareShow = true;
			// 			  	}
			// 			  })
			// 		  })
			// 		// },
			// 		// fail: function(err) {
			// 		// 	uni.hideLoading();
			// 		// }
			// 	// })
				
			// },
			
			onPageScroll(res) {
				var that = this,
					scrollY = res.scrollTop;
				var opacity = scrollY / 200;
				opacity = opacity > 1 ? 1 : opacity;
				that.$set(that, 'opacity', opacity);
			},
			/* 获取邀请记录列表 */
			getInviteList() {
				inviteList().then(res => {
					this.inviteCount = res.data.count;
					this.couponCount = res.data.is_get_count;
					this.list = res.data.list;
				}) 
			},
			/* 获取分享二维码 */
			getShareCode() {
				shareQrcode().then(res => {
					this.shareQrUrl = res.data[0]
				})
			},
			/* 保存到本地 */
			downLoadBase64Fun() {
				// 获取当前图片信息
				uni.getImageInfo({
					src: this.shareQrUrl,
					success: image => {
						// 做png/jpeg的类型判断————对不同类型的图像添加不同的转换头信息
						if(image.type=='png'||image.type=='jpeg'){
							// 对符合类型的图片转换为base64类型
							uni.getFileSystemManager().readFile({// 【重点来啦】人家自提供的转码API
								filePath:image.path,// 所需转码图像路径
								encoding:"base64",// 转码类型
								success:(res)=>{
									// 生成base64
									let imageBase64='data:image/'+image.type+';base64,'+res.data;
									uni.saveImageToPhotosAlbum({
										filePath: imageBase64,
										success: function(res) {
											uni.showToast({
												title: '保存成功',
												icon: 'success'
											})
										},
										fail: function(res) {
											uni.showToast({
												title: '保存失败',
												icon: 'error'
											})
										}
									});
								},
								fail: err => {
									console.log(err, "--err");
								}
							})
						}else{// 友好一点，不是以上类型做出提醒
							uni.showToast({
								title:'当前只支持png/jpeg格式',
								duration:2500,
								icon:'none'
							})
						}
					},
					fail: err => {
						console.log(err, "---err");
					}
				});
			},
			/* 点击分享按钮 */
			clickShare() {
				this.shareShow = true;
				this.getShareCode();
			},
		},
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-icon__icon {
		font-size: 40rpx !important;
	}
	.invite-list {
		/deep/ .u-icon__icon {
			font-size: 80rpx !important;
		}
		/deep/ .u-empty__text {
			margin-top: 0 !important;
		}
	}

		.title-w-box {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 277;
			display: flex;
			align-items: center;
			padding-left: 80rpx;
			background-color: #fff;
			height: 170rpx;
		}
		
		.title-box {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 277;
			display: flex;
			align-items: center;
			padding-left: 80rpx;
			height: 170rpx;
			.main {
				font-size: 32rpx;
				font-weight: bold;
				color: #1F1F1F;
			}
		}

	.share-box {
		height: 320rpx;

		.fixed-share-box {
			position: fixed;
			top: 15%;
			left: 50%;
			transform: translateX(-50%);
			width: 654rpx;
			height: 912rpx;
			// background-color: #f99;
			// background: url("http://dwimg.yunwucloud.com/share-bg.png");
			// background-size: 100%;
			// background-repeat: no-repeat;
			// .qrcode-box {
			// 	position: absolute;
			// 	width: 208rpx;
			// 	height: 208rpx;
			// 	bottom: 170rpx;
			// 	left: 50%;
			// 	transform: translateX(-50%);
				image {
					width: 100%;
					height: 100%;
					border-radius: 24rpx;
				}
			// }
		}

		.download-box {
			.download-tit {
				font-size: 32rpx;
				line-height: 32rpx;
			}

			.download-btn {
				.imgBox {
					width: 104rpx;
					height: 104rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.download-txt {
					font-size: 28rpx;
					line-height: 28rpx;
					margin-top: 20rpx;
				}

				display: flex;
				align-items: center;
				flex-direction: column;
				margin-top: 80rpx;
			}

			font-family: PingFangSC-Medium,
			PingFang SC;
			font-weight: bold;
			color: #1F1F1F;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding-top: 30rpx;
		}
	}

	page {
		background-color: #FF8547;
	}

	.wrap {
		background: url("http://qnimg.yunkede.com/849357c93b8a04038be3ccb1ab521d2.png");
		background-size: 100%;
		background-repeat: no-repeat;
		padding-bottom: 40rpx;
	}

	.pad-top40 {
		padding-top: 40rpx;
	}

	.top {
		position: relative;
		width: 100%;
		height: 1360rpx;

		.top-img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.share-btn {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 460rpx;
			border-radius: 50%;
			width: 180rpx;
			height: 180rpx;
		}

		.tip-content {
			position: relative;
			text-align: center;
			color: #fff;
			top: 450rpx;
			font-size: 24rpx;
		}

		.invite-count {
			position: relative;
			text-align: center;
			color: #fff;
			top: 750rpx;
			font-size: 24rpx;

			.money {
				margin-top: 24rpx;
				font-size: 56rpx;
			}

			.unit {
				font-size: 28rpx;
			}
		}
	}

	.invitation-progress {
		position: relative;
		width: 702rpx;
		height: 288rpx;
		top: -100rpx;
		margin: 0 auto;
		background: url("http://qnimg.yunkede.com/947aa1ccbc1e0cdb465771af3c7560f.png");
		background-size: 100%;
		background-repeat: no-repeat;
		align-items: center;

		.progress-bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.content {
			position: relative;
			display: flex;

			// height: 100%;
			.item {
				flex: 1;
				flex-direction: column;
				display: flex;
				align-items: center;
				justify-content: center;

				.title {
					font-size: 24rpx;
					color: #FF1F2E;
				}

				.desc {
					font-size: 48rpx;
					font-weight: bold;
					color: #FF1F2E;
				}
			}
		}
	}

	.list-top-img {
		position: relative;
		width: 342rpx;
		height: 80rpx;
		top: -20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		left: 50%;
		transform: translateX(-50%);

		image {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.title {
			position: relative;
			font-weight: bold;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			color: #FF1F2E;
			line-height: 32rpx;
		}
	}

	.invite-list {
		position: relative;
		width: 702rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 24rpx;
		border: 6rpx solid #FFD3AD;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-bottom: 20rpx;
		// align-items: center;
		.item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 24rpx;
			align-items: center;
			.left {
				display: flex;
				align-items: center;

				.avatar {
					width: 88rpx;
					height: 88rpx;
					// background-color: #999;
					border-radius: 50%;
					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.user-info {
					margin-left: 24rpx;

					.name {
						font-size: 32rpx;
						color: #1F1F1F;
					}

					.date {
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}

			}

			.right {
				.money {}
			}

		}
	}
</style>